<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>栅格系统</title>
    <link rel="stylesheet" href="../../lib/bootstrap/css/bootstrap.css">
</head>
<body>

<!--
    布局 ：
       1. 无布局  ---》
       2. table --- 行列合并、表格嵌套/frameset - iframe ;
       3. div+css / float positon
       4. 栅格系统 容器、行、列
       5. flex

      栅格系统 响应式布局
      1. 容器
      2. 行
      3. 列
      4. 偏移量
      5. 列嵌套

-->
<!--container--- 大空间布局-->
<!--container-fluid，流式布局，局部布局-->
<div class="container">
    <!--<div class="row">
        <div class="col-md-4 col-sm-6">col-md-4</div>
        <div class="col-md-4 col-sm-6">col-md-4</div>
        <div class="col-md-4 col-sm-6">col-md-4</div>
    </div>-->
    <div class="row">
        <div class="col-md-2 col-md-offset-4">col-md-2</div>
        <div class="col-md-6">
            <div class="col-md-6">col-md-6 col-md-6</div>
            <div class="col-md-6">col-md-6 col-md-6</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">col-md-3</div>
        <div class="col-md-3">col-md-3</div>
        <div class="col-md-3">col-md-3</div>
        <div class="col-md-3">col-md-3</div>
    </div>
</div>


</body>
</html>